<script>
import {captcha, token} from "../../../api/auth";
import {ElMessage} from "element-plus";
import {setItem} from "../../../utils/WebUtil";
export default {
    name: 'LoginAccount',
    data() {
        return {
            captchaInfo: {},
            account:{
                grantType:'captcha',
                account:'',
                password:'',
                authCode:'',
            }
        }
    },
    methods: {
        getCaptcha() {
            captcha()
                .then(res => {
                    this.captchaInfo = res.data
                })
        },
        login(){
            const head={
                'Captcha-Key':this.captchaInfo.key,
                'Captcha-Code':this.account.authCode
            }
            token(this.account,head)
                .then(res=>{
                    if(res.code===200){
                        this.$store.commit('setUser',res.data);
                        setItem("auth",res.data)
                        this.$router.push('/');
                        ElMessage.success("登录成功");
                    }else {
                        ElMessage.error(res.msg);
                    }
                })
        }
    },
    created() {
        this.getCaptcha()
    }
}
</script>

<template>
    <div class="login-box flex align-center column" style="padding: 20px 0">
        <h2>飞鱼客栈后台系统</h2>
        <div class="input-box flex column align-center space-around">
            <el-input v-model="account.account" placeholder="用户名" clearable class="login-input">
                <template #prefix><i class="iconfont icon-user icon"/></template>
            </el-input>
            <el-input v-model="account.password" placeholder="密码" type="password" show-password class="login-input">
                <template #prefix><i class="iconfont icon-password icon"/></template>
            </el-input>
            <div class="flex center align-center space-between" style="width: 300px">
                <el-input v-model="account.authCode" class="login-input" style="width: 130px"/>
                <img @click="getCaptcha" :src="captchaInfo.image" alt="" style="width: 130px;height: 40px;border: 1px #e7e6e6 solid;border-radius: 10px"/>
            </div>
            <el-button @click="login" style="width: 300px;height: 40px;border-radius: 10px">登录</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-box {
    width: 500px;
    height: 400px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-input {
    width: 300px;
    height: 40px;
    font-size: 12pt;

    :deep(.el-input__inner) {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}

.input-box {
    height: 300px;
    width: 100%;
}
</style>
